<template>
	<div class='pageBox'>
		<el-cascader v-model="value" :options="options" @change="handleChange" popper-class="my-cascader" />
	</div>
</template>
<script setup lang="ts" >
import { ref,reactive, onMounted,onUnmounted,defineEmits } from 'vue';
import data from 'province-city-china/dist/level.json';

const emit = defineEmits(['myCascader'])
// 初始化数据
const value = ref([])
const options = ref([])
const dataList = data

const handleChange = (value) => {
  emit('myCascader', [value[1],value[2]])
}
const getAreaCode = (nodeId) => {
  const parents = findAllParents(
    dataList,
    { code: nodeId },
    (item, node) => item.code === node.code
  )

  let codes = []
  let names = []

  for (let node of parents) {
    codes.push(node.code)
    names.push(node.name)
  }

  codes.push(nodeId)
  let data = { codes: codes, names: names }
  return data
}

//json.js
const defaults = {
  props: {
    children: 'children'
  }
}

const findParent = (data, node, predicate, options = {}) => {
  let config = Object.assign({}, defaults, options)

  let parent = undefined
  for (let i = 0; i < data.length; i++) {
    if (parent) return parent

    let item = data[i]

    if (item[config.props.children] && item[config.props.children].length > 0) {
      let child = item[config.props.children].filter((c) => predicate(c, node))
      if (child.length > 0) {
        parent = item
      }

      if (parent === undefined) {
        parent = findParent(item[config.props.children], node, predicate, config)
      } else {
        break
      }
    }
  }
  return parent
}

const findAllParents = (data, node, predicate, options = {}) => {
  let config = Object.assign({}, defaults, options)

  let allParents = []
  let parent = findParent(data, node, predicate, config)
  while (parent !== undefined) {
    allParents.unshift(parent)
    parent = findParent(data, parent, predicate, config)
  }
  return allParents
}

onMounted(() => {
  options.value = data
  options.value = options.value.map((item) => {
    return {
      value: item.code,
      label: item.name,
      children: item.children?.map((item2) => {
        return {
          value: item2.code,
          label: item2.name,
          children: item2.children?.map((item3) => {
            return {
              value: item3.code,
              label: item3.name
            }
          })
        }
      })
    }
  })

  value.value = getAreaCode('210102').codes
})
</script>
<style scoped lang='less'>
::v-deep .el-input__wrapper{
	width: 356px;
	height: 23px;
	background: #001A35;
	box-shadow: inset 0px 0px 8px 0px #3D7FFF;
	border-radius: 8px;
	border: 1px solid #03DBFF;
  font-size: 12px;
	.el-input__inner{
		color: #D7DDE2;
	}
	.el-input__suffix{
		color: rgba(3, 219, 255, 1);
	}
}

</style>
<style lang="less">
.my-cascader .el-cascader-panel .el-cascader-menu:first-child{
  display: none !important;
}
.my-cascader .el-cascader-panel .el-cascader-menu .el-cascader-menu__wrap{
    color: #ffffff !important;
}

</style>
